<template>
  <div class='frequency-distribution'>
    <el-tabs v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="学习频次分布"
                   name="first">
        <div class="coursesonline">
          <div ref="chart"
               style="width:100%;height:100%"></div>
        </div>

      </el-tab-pane>
    </el-tabs>
    <div class="bodyRight">
      <div class="bodyRightL">
        <el-button size="small"
                   @click="onWeekData"
                   :class="{buttonbgc:isWeekShow}">按周</el-button>
        <el-button size="small"
                   @click="onMonthData"
                   :class="{buttonbgc:isMonthShow}">按月</el-button>
        <el-button size="small"
                   @click="onYearData"
                   :class="{buttonbgc:isYearShow}">按年</el-button>
      </div>
      <div class="bodyRightR">
        <div class="block">
          <el-date-picker v-model="time"
                          :type="isdate"
                          :format="format"
                          placeholder="选择日期"
                          size="small"
                          @change="dateChange">
          </el-date-picker>

        </div>
      </div>
    </div>
    <div class="box1"></div>
    <div class="bottom">
      <!-- 表格 -->
      <el-table :data="list.slice()"
                border
                highlight-current-row
                :header-cell-style="{'text-align':'center',background:'#F5F7FA',color:'#888', height: 60 + 'px'}"
                :cell-style="{'text-align':'center'}"
                :row-style="{height: 50 + 'px'}"
                style="width: 100%">
        <el-table-column prop="frequency"
                         label="频次"
                         width="200">

        </el-table-column>
        <el-table-column prop="distributionNum"
                         label="学习人数">
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="this.page"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="this.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="list.length">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getFrequencyDistribution} from '@/api/zzb-course'
  export default {
    name: 'frequencyDistribution',
    components: {},
    props: {},
    data () {
      return {
        isWeekShow:true,
        isMonthShow:false,
        isYearShow:false,
        isdate:'week',
        time:new Date(),
        format:'yyyy 年 第 WW 周',
        pickerFormat:'yyyy 年 第 WW 周',
        datePickerSel:this.$options.filters['week'](new Date()),
        activeName:'first',
        category:[],
        barData:[],
        startDate:'',
        endDate:'',
        mindate:0,
        maxdate:0,
        list:[],
        pageSize:10,
        page:1
      }
    },
    computed: {},
    watch: {},
    methods: {
      onWeekData(){
        this.isWeekShow=true
        this.isMonthShow=false
        this.isYearShow=false
        this.isdate='week'
        this.format='yyyy 年 第 WW 周'
        this.datePickerSel=this.$options.filters['week'](this.time).toString()
        this.dateChange()
        this.disciplineRanking()
        
      },
      onMonthData(){
        this.isWeekShow=false
        this.isMonthShow=true
        this.isYearShow=false
        this.format='yyyy 年 M 月'
        this.isdate='month'
        this.datePickerSel=this.$options.filters['month'](this.time).toString()
        console.log(this.datePickerSel);
        this.startDate=this.datePickerSel+'-01'
        this.endDate=this.datePickerSel+'-30'
        this.loadFrequency()
        this.disciplineRanking()
        
      },
      onYearData(){
        this.isWeekShow=false
        this.isMonthShow=false
        this.isYearShow=true
        this.isdate='year'
        this.format='yyyy 年'
        this.datePickerSel=this.$options.filters['year'](this.time).toString()
        this.startDate=this.datePickerSel+'-01-01'
        this.endDate=this.datePickerSel+'-12-31'
        this.loadFrequency()
        this.disciplineRanking()
        
      },
      dateChange(){
          if(this.isdate==='month'){
                  //  this.datePickerSel=this.$options.filters['month'](this.time).toString()
                  this.onMonthData()
          }else if(this.isdate==='year'){
            //  this.datePickerSel=this.$options.filters['year'](this.time).toString()
            this.onYearData()
          }else{
            //  this.datePickerSel=this.$options.filters['week'](this.time).toString() 
              
            //  console.log(this.$options.filters['week'](this.time).toString());
            // console.log(this.datePickerSel)
            var d = new Date(this.time)
            // 起始日期
            var youWant =
              d.getFullYear() +
              '-' +
              (d.getMonth() + 1 + '').padStart(2, '0') +
              '-' +
              (d.getDate() - 1 + '').padStart(2, '0')
            // this.startDate = youWant

            // 终止日期
            var d2 = new Date(+new Date(this.time) + 5 * 86400000)
            var youWant2 =
              d2.getFullYear() +
              '-' +
              (d2.getMonth() + 1 + '').padStart(2, '0') +
              '-' +
              (d2.getDate() + '').padStart(2, '0')
            // this.endDate = youWant2
            // console.log(youWant, youWant2)
            this.startDate=youWant
            this.endDate=youWant2
            // console.log(this.startDate,this.endDate);
            this.loadFrequency()
          }
      },
      async loadFrequency(){     
        this.category=[]
        this.barData=[]
           const {data:res}= await getFrequencyDistribution({
                startDate:this.startDate,
                endDate:this.endDate
           })
           res.result.forEach(item=>{
             this.category.push(item.frequency)
             this.barData.push(item.distributionNum)
           })
           this.list=res.result
          //  console.log( this.category);
     },
      handleClick(){

      },
      //  分页器
      handleSizeChange(newSize) {
          this.pageSize=newSize
      },
       //  分页器
      handleCurrentChange(newPage) {
          this.pageSize=newPage
      },

      disciplineRanking(){
        setTimeout(() => {
          const chart = this.$refs.chart
          if(this.isdate==='week'){
              this.mindate=6000
              this.maxdate=13000
          }else if(this.isdate==='month'){
              this.mindate=3000
              this.maxdate=10000
          }else{
              this.mindate=23000
              this.maxdate=29000
          }
        if (chart) {
            const myChart = this.$echarts.init(chart)
                //初始化数据          
            var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: this.category,
                  splitLine: {show: false},
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  }
              },
              yAxis: {
                min:this.mindate,  //取0为最小刻度
                max: this.maxdate, //取100为最大刻度
                  type: 'value',
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  offset: 10,
                  nameTextStyle: {
                      fontSize: 15
                  }
              },
              series: [
                  {
                      type: 'bar',
                      data: this.barData,
                      barWidth: 16,
                      barGap: 10,
                      smooth: true,
                      label: {
                          normal: {
                              // show: true,
                              position: 'right',
                              offset: [5, -2],
                              textStyle: {
                                  color: '#F68300',
                                  fontSize: 13
                              }
                          }
                      },
                      itemStyle: {
                          emphasis: {
                              barBorderRadius: 7
                          },
                          normal: {
                              barBorderRadius: 7,
                              color: new echarts.graphic.LinearGradient(
                                  0, 0, 1, 0,
                                  [
                                      {offset: 0, color: '#3977E6'},
                                      {offset: 1, color: '#37BBF8'}
      
                                  ]
                              )
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option);
                
                window.addEventListener("resize", function() {
                  myChart.resize()
                })
              }
              this.$on('hook:destroyed',()=>{
                window.removeEventListener("resize", function() {
                  myChart.resize();
                });
                })
        }, 0);
      },
    },
    updated () {
      this.disciplineRanking()
    },
    created () {
      this.dateChange()
    },
    mounted () {
      this.disciplineRanking()
    },
  }
</script>
<style lang='less' scoped>
.frequency-distribution {
    position: relative;
   // height: 520px;
    padding: 25px;
    background-color: #fff;
    margin-top: 15px;
    color: #f5f5f5 !important;
    border-radius: 6px;
    /deep/ .el-tabs__nav-wrap::after {
      display: none;
    }
    /deep/ .el-tabs__item {
      font-size: 16px !important;
    }
    /deep/ .el-tabs__active-bar {
      height: 4px !important;
      background-color: #65ded7 !important;
      border-radius: 4px;
    }
    /deep/ .el-tabs__item.is-active {
      color: #185fef !important;
    }
    /deep/ .el-button {
      border: none !important;
    }
    .buttonbgc {
      background-color: #079fff;
      color: #fff;
    }
    .grid-date {
      padding-left: 25px;
    }
    .grid-right {
      margin-top: 10px;
    }
    .coursesonline {
      height: 500px;
      width: 1230px !important;
     
    }
    .bodyRight {
      width: 500px;
      position: absolute;
      right: 0px;
      top: 27px;
      .bodyRightR {
        margin-left: 30px;
      }
    }
    .bodyRight > div {
      display: inline-block;
    }

    .box1 {
      position: absolute;
      width: 1450px;
      height: 10px;
      background-color: #f5f5f5;
      margin-top: 10px;
       right: -25px;
      }

      .bottom {
  position: relative;
  margin-top: 50px;
 //  width: 1020px;
   height: 460px;
   background-color: #fff;
   .el-table {
      width: 1000px;
     // margin-left: 50px;
     .el-table-column {
       text-align: center;
     }
   }
   .el-pagination {
     margin-top: 20px;
    
     right: -10px;
     position: absolute;
   }
}
    
  }

</style>